window.addEventListener('load', function() {
    // 1  // 实现登陆注册面板的显示和隐藏
    // 还没有账号，去注册
    let goRegister = document.querySelector('.goRegister')
    // 已有账号，去登陆
    let goLogin = document.querySelector('.goLogin')
    // 注册面板
    let register =document.querySelector('.register')
    // 登录面板
    let login = document.querySelector('.login')

    //2 获取注册面板中的用户名和密码
    let rusername = this.document.querySelector('.register [ name = "username"]')
    let rpassword = this.document.querySelector('.register [ name = "password"]')
    // 获取注册面板中的用户名和密码
    let lusername = this.document.querySelector('.login [name="username"]')
    let lpassword = this.document.querySelector('.login [name="password"]')

    // 1.1. 绑定事件切换登录注册面板
    // 注册面板
    goRegister.addEventListener('click',()=>{
        // 显示注册
        register.style.display = 'block',
        // 隐藏注册
        login.style.display = 'none'
    })
    // 登录面板
    goLogin.addEventListener('click',()=>{
        // 显示注册
        register.style.display = 'none',
        // 隐藏注册
        login.style.display = 'block'
    })

    // 2. 注册添加验证规则 用户名和密码进行验证（基于插件bootstrap框架的使用）
    // 2.1 基于bootstrap框架的使用
    // 自定义插件的验证规则
    function test() {
        // 返回验证对象
        return {
          // fields：指定你需要验证的属性，这个属性名称对应着指定表单中的表单元素的name属性值
          fields: {
            // 一个一个的具体的验证规则
            username: {
              // 这里username是 input 的name属性值，表示对这个输入框进行验证
              validators: {
                // 添加真正的校验规则
                notEmpty: {
                  //不能为空
                  message: '用户名不能为空.' // 如果不满足校验规则，则给出这句提示
                },
                stringLength: {
                  //检测长度
                  min: 2, // 最少2位
                  max: 15, // 最多15位
                  message: '用户名需要2~15个字符'
                }
              }
            },
            password: {
              validators: {
                notEmpty: {
                  message: '密码不能为空'
                },
                stringLength: {
                  //检测长度
                  min: 6,
                  max: 15,
                  message: '密码需要6~15个字符'
                }
              }
            }
          }
        }
      }
    // 2.2 // 注册:为注册form表单中的submit绑定事件
 // bootstrapValidator：插件内置的验证方法，调用这个方法实现验证
  // test()：这就是自定义的验证规则(基于插件)
  // on：为元素绑定事件方法
  // success.form.bv：表单的submit的默认提交行为 这里是检测表单submit的按钮行为
  $('.register form')
  .bootstrapValidator(test())
  .on('success.form.bv', function(e) {
    e.preventDefault()
    // @2.1  通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
   axios({
    method:'post',
    url:'api/register',
    data:{
        //@2.2 后台 username password 提交数据 
        username:rusername.value,
        password:rpassword.value
    }
   })
   .then(res=>{
    // console.log(res.data);
    //@2.3 判断
    // 成功
    if(res.data.code === 0){ // 0 表示成功
        // 使用吐司插件进行提示 toastr成功  在mytoastr.js配置
        toastr.success(res.data.message)
        // 注册成功之火切换到登录面板
        setTimeout(() => {
            goLogin.click()
        }, 1500);
    }
    else{
        // 提示警告
        toastr.warning(res.data.message)
    }

   })
  })
    // 3. 登录
    $('.login form')
    .bootstrapValidator(test())
    .on('success.form.bv', function(e) {
      e.preventDefault()
      // @2.1  通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
     axios({
      method:'post',
      url:'api/login',
      data:{
          //@2.2 后台 username password 提交数据 
          username:lusername.value,
          password:lpassword.value
      }
     })
     .then(res=>{
      // console.log(res);
      //@2.3 判断
      // 成功
      if(res.data.code === 0){ // 0 表示成功
          // 使用吐司插件进行提示 toastr成功  在mytoastr.js配置
        //   toastr.success(res.data.message)
        // 将后台响应的token实现本地存储----index.js
        // 验证是否有用户信息实现用户能否登录---通过拦截器的方法
        localStorage.setItem('token-80',res.data.token)
         // 成功登录跳转到后台首页
         location.href = './index.html'
      }
      else{
          // 提示错误
          toastr.error(res.data.message)
      }
  
     })
    })



})